<template>
  <div class="container">
    <div class="firstLine">
      <FirstCard :option="option1[0]" class="card">
        <p>日同比 {{ option1[0].num3 }}<span class="triangle"></span></p>
        <p>月同比 {{ option1[0].num4 }}<span class="triangle"></span></p>
      </FirstCard>
      <FirstCard :option="option2[0]" class="card">
        <v-chart :option="option2[1]"></v-chart>
      </FirstCard>
      <FirstCard :option="option3[0]" class="card">
        <v-chart :option="option3[1]"></v-chart>
      </FirstCard>
      <FirstCard :option="option4[0]" class="card">
        <v-chart :option="option4[1]"></v-chart>
        <template #span
          ><span class="triangle"></span> 月同比{{ option4[0].num3
          }}<span class="triangle"></span
        ></template>
      </FirstCard>
    </div>
    <div class="secondLine">
      <secondLine></secondLine>
    </div>
  </div>
</template>

<script>
import FirstCard from "./components/firstCard.vue";
import secondLine from "./components/secondLine.vue";
export default {
  data() {
    return {
      datas: {},
      option1: [{}],
      option2: [{}, {}],
      option3: [{}, {}],
      option4: [{}, {}],
    };
  },
  components: {
    FirstCard,
    secondLine,
  },
  methods: {
    async getData() {
      const res = await fetch("http://39.103.151.139:3001/apis/reportdata");
      this.datas = await res.json();
      this.option1 = [
        {
          text: "累计销售额",
          num1: this.datas.salesToday,
          subtext: "昨日销售额",
          num2: this.datas.salesLastDay,
          num3: this.datas.salesGrowLastDay + "%",
          num4: this.datas.saleSGrowLastMonth + "%",
        },
      ];
      this.option2 = [
        {
          text: "累计订单额",
          num1: this.datas.orderToday,
          subtext: "昨日销售额 ￥",
          num2: this.datas.orderLastDay,
        },
        {
          xAxis: {
            show: false,
            type: "category",
            boundaryGap: false,
          },
          yAxis: {
            show: false,
            type: "value",
          },
          series: {
            name: "Echarts-admin",
            type: "line",
            data: this.datas.orderTrend,
            areaStyle: {
              color: "purple",
            },
            lineStyle: {
              opacity: 0,
            },
            itemStyle: {
              opacity: 0,
            },
            smooth: true,
          },
          grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
          },
        },
      ];
      this.option3 = [
        {
          text: "今日用户交易数",
          num1: this.datas.userToday,
          subtext: "退货率",
          num2: this.datas.returnRate + "%",
        },
        {
          xAxis: {
            show: false,
            type: "category",
          },
          yAxis: {
            show: false,
          },
          series: {
            name: "Echarts-admin",
            type: "bar",
            data: this.datas.orderUserTrend,
          },
          grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
          },
        },
      ];
      this.option4 = [
        {
          text: "累计用户数",
          num1: this.datas.totalUser,
          subtext: "日同比",
          num2: this.datas.userGrowLastDay + "%",
          subtext2: "月同比",
          num3: this.datas.userGrowLastMonth + "%",
        },
        {
          xAxis: [
            {
              show: false,
              type: "value",
            },
          ],
          yAxis: {
            show: false,
            type: "category",
          },
          series: [
            {
              type: "scatter",
              data: [80],
              symbol: "triangle",
              color: "green",
              symbolOffset: [0, -15],
              symbolRotate: 180,
            },
            {
              type: "bar",
              data: [80],
              stack: "num",
              barWidth: 10,
            },
            {
              type: "bar",
              data: [20],
              stack: "num",
              barWidth: 10,
            },
            {
              type: "scatter",
              data: [80],
              symbol: "triangle",
              color: "green",
              symbolOffset: [0, 15],
            },
          ],
          grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
          },
        },
      ];
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  padding: 20px 20px 0;
}
.firstLine {
  display: flex;
  width: 100%;
  gap: 20px;
  .triangle {
    display: inline-block;
    width: 0;
    margin-left: 10px;
    height: 0;
    border-width: 4px;
    border-color: transparent transparent green transparent;
    border-style: solid;
    transform: translateY(-50%);
    font-size: 14px !important;
    color: #464545;
  }
}
.secondLine {
  position: relative;
  margin-top: 20px;
}
</style>
